<!--
 @description
 @fileName CartSheet.vue
 @author zengqiongying
 @created 2022/08/03 13:53:21
-->
<template>
  <Popup
    v-model="popShow"
    position="bottom"
    confirm-button-text="加入购物车"
    :show-cancel-button="false"
    @confirm="handleConfirm"
  >
    <div slot="title" class="cell-title">
      <div class="picture">
        <ImageVideo :src="mainPicUrl" fit="fill" />
      </div>
      <div class="price">{{ price }}</div>
    </div>
    <div class="sh-content">
      <div>
        <div class="cell-name mb16">规格选择</div>
        <Attribute
          :sku-id="skuId"
          :comlist="attributes"
          :skus="skus"
          :attr-choose="attrChoose"
          @refresh="getDetail"
        />
      </div>
      <div class="sh-cell">
        <div class="cell-name">购买数量</div>
        <div class="cell-con">
          <div class="number">
            <van-stepper v-model="quantity" integer step="1" min="1" max="1000" @change="handleQuantityChange" />
          </div>
        </div>
      </div>
      <div class="sh-cell">
        <div class="cell-name">物品选项</div>
        <div class="cell-con">
          <div class="flag-tag">
            <div v-for="(item,i) in productFlagList" :key="i" :class="['tag',{'active':productFlag.includes(item.value)}]" @click="clickFlag(item.value)">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import Popup from '@/components/Popup'
import ImageVideo from '@/components/ImageVideo'
import Attribute from '@/components/Attribute/ReadAttr'
import { addShoppingCart } from '@/apis/cart'
export default {
  name: 'ProductCartSheet',
  components: {
    Popup, ImageVideo, Attribute
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    detail: {
      type: [String, Object],
      default: ''
    },
    attributes: {
      type: Array,
      default: () => []
    },
    attrChoose: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      flagTags: [
        { value: '02', label: '样品' },
        { value: '03', label: '赠品' }
      ],
      quantity: '', // 购买数量
      productFlag: [] // 产品标识：01 否 ， 02 样品 , 03 赠品
    }
  },
  computed: {
    popShow: {
      set(val) {
        this.$emit('update:show', val)
      },
      get(val) {
        return this.show
      }
    },
    productFlagList() {
      /* if (this.detail.skuPriceTag === '特价') {
        return this.flagTags.filter(v => v.value !== '03')
      } */
      return this.flagTags
    },
    skuId() {
      return this.detail.skuId
    },
    spuId() {
      return this.detail.productId
    },
    mainPicUrl() {
      let mainPic = this.detail.pics && this.detail.pics.length > 0 ? this.detail.pics[0].picUrl : ''
      const list = (this.detail.pics || []).filter(v => v.mainPicFlag === 'Y')
      if (list.length > 0) {
        mainPic = list[0].picUrl
      }
      return mainPic
    },
    price() {
      const price = this.detail.skuPrice
      return price < 999999 && this.$isDef(price) && !this.$isEmpty(price) ? price : '暂无报价'
    }, // 价格
    isActivity() {
      return this.detail.skuPriceTag === '特价' ? 1 : 0
    }, // 是否特价/活动价 ：价签=特价
    skus() {
      return this.detail.skus || []
    }
  },

  created() {},
  methods: {
    getDetail(skuId) {
      this.$emit('refresh', skuId)
    },
    // 选择标记
    clickFlag(value) {
      const index = this.productFlag.findIndex(v => v === value)
      if (index > -1) {
        this.productFlag.splice(index, 1)
        return
      }
      this.productFlag.push(value)
    },
    // 购买数量变更
    handleQuantityChange() {

    },
    // 确定加入购物车
    handleConfirm() {
      let productFlag = this.productFlag.join(',')
      if (this.productFlag.includes('02') && this.productFlag.includes('03')) {
        productFlag = '05'
      }
      if (productFlag === '') {
        productFlag = '01'
      }
      // 查找当前sku编码和名称
      const sku = this.skus.find(v => v.id === this.skuId)
      // const price = this.price === '暂无报价' ? 0 : this.price
      const price = this.detail.skuPrice
      const params = {
        skuId: this.skuId,
        spuId: this.spuId,
        skuCode: sku.skuCode || '',
        skuName: sku.skuName || '',
        mainPicUrl: this.mainPicUrl,
        salePrice: price, // 销售单价
        orangePrice: price, // 原价
        quantity: this.quantity,
        productFlag,
        isActivity: this.isActivity
        // disCode:'经销商编码'
      }

      addShoppingCart(params).then(res => {
        if (res.success === 1) {
          this.$toast('成功加入购物车！')
          this.$emit('success', this.quantity)
        }
      }).catch((err) => {
        this.$emit('fail', err || '')
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .cell-title{
    display: flex;
    .picture{
      width: 58px;
      height: 58px;
      background: #D8D8D8;
      border-radius: 3px;
      overflow: hidden;
      margin-right: 10px;
    }
    .price{
      display: flex;
      align-items: center;
      height: 28px;
      line-height: 28px;
      font-size: 20px;
      font-weight: bold;
      color: #EB5F2B;
      line-height: 28px;
      letter-spacing: 1px;
      &::before{
        content: '￥';
        font-size: 12px;
      }
    }
  }
  .sh-content{
    border-top: 1px solid #F4F5F6;
    margin-top: 16px;
    padding-top: 16px;
    max-height: 50vh;
    overflow-y: auto;
    .sh-cell{
      display: flex;
      border-top: 1px solid #F4F5F6;
      padding: 16px 0;
    }
    .cell-name{
      line-height: 30px;
      color: #111111;
      letter-spacing: 1px;
      font-size: 14px;
      font-weight: bold;
    }
    .cell-con{
      margin-left: 10px;
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
  .number{
    display: flex;
    justify-content: flex-end;
    /deep/ .van-stepper__input{
      width: 38px;
      height: 30px;
      font-size: 14px;
    }
    /deep/ button{
      width: 30px;
      height: 30px;
    }
  }
  .flag-tag{
    display: flex;
    .tag{
      margin-left: 10px;
      width: 74px;
      height: 26px;
      line-height: 26px;
      background: #F3F4F5;
      border: 1px solid #F3F4F5;
      border-radius: 13px;
      font-size: 12px;
      color: #666666;
      text-align: center;
      letter-spacing: 1px;
      &.active{
        color: #00C8B4;
        background: rgba(0,200,180,0.0400);
        border-radius: 13px;
        border: 1px solid #00C8B4;
      }
    }
  }
  .mb16{
    margin-bottom:16px
  }
</style>
